<template>
  <div class="edit-content">
    <el-steps
      :active="1"
      class="stepsBox"
      finish-status="success"
      simple
      style="margin-top:20px;margin-left:30px;width:900px;height:50px;"
    >
      <el-step title="选择活动类型"/>
      <el-step title="选择商品"/>
      <el-step title="设置方案"/>
    </el-steps>
    <el-form ref="editform" :model="editform" :rules="rules" label-width="100px">
      <el-form-item label="营销类型">
        <el-radio-group v-model="radioCkd">
          <el-radio :disabled="undisabled" label="课程">课程</el-radio>
          <el-radio :disabled="undisabled" label="班级">班级</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="radioCkd =='课程'" label="课程名称">
        <el-input v-model="editform.courseName" placeholder="请输入关键字" style="width:200px"/>
        <div class="el-upload__tip">原价低于 1.00 元的课程不能参加活动</div>
      </el-form-item>
      <el-form-item v-if="radioCkd =='班级'" label="班级名称">
        <el-input v-model="editform.className" placeholder="请输入关键字" style="width:200px"/>
        <div class="el-upload__tip">课程重合时无法抵扣购买，且原价低于 1.00 元的班级不能参加活动</div>
      </el-form-item>
      <!-- <el-form-item label="课程名称">
        <div>测试789</div>
      </el-form-item>
      <div class="item-cover">
        <a href="http://bjtest1.edusoho.cn/course/87" target="_blank" class="item-cover__img">
          <img
            src="//scd4a4b1c7e0b-static.qiqiuyun.net/files/item/2018/11-15/09350265ef5a654841.jpg"
          >
        </a>
      </div>-->
      <el-form-item label="活动名称" prop="activityName">
        <el-input v-model="editform.activityName" placeholder="请输入活动名称" style="width:40%"/>
      </el-form-item>
      <el-form-item label="活动介绍">
        <tinymce v-model="editform.tinymce" :height="150" :show="true" style="width:40%"/>
      </el-form-item>
      <el-form-item>
        <div style="cursor:pointer;width:50px;" @click="showSwitch">
          <i class="el-icon-setting cursor-pointer">&nbsp;高级</i>
        </div>
      </el-form-item>
      <el-form-item :hidden="editform.showswitch" label="网校介绍">
        <el-switch
          v-model="editform.switch1"
          class="switchStyle"
          active-color="#20a0ff"
          inactive-color="#bfcbd9"
          active-text="展示"
          inactive-text="隐藏"
        />
      </el-form-item>
      <el-form-item :hidden="editform.showswitch" label="老师介绍">
        <el-switch
          v-model="editform.switch2"
          class="switchStyle"
          active-color="#20a0ff"
          inactive-color="#bfcbd9"
          active-text="展示"
          inactive-text="隐藏"
        />
      </el-form-item>
      <el-form-item :hidden="editform.showswitch" label="课程目录">
        <el-switch
          v-model="editform.switch3"
          class="switchStyle"
          active-color="#20a0ff"
          inactive-color="#bfcbd9"
          active-text="展示"
          inactive-text="隐藏"
        />
      </el-form-item>
      <el-form-item>
        <el-button v-if="undisabled" type="primary" @click="submitBtn">保 存</el-button>
        <el-button v-if="!undisabled" type="primary" @click="goNextBtn">下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 导入富文本编辑器
import Tinymce from '@/components/Tinymce'
export default {
  components: {
    Tinymce
  },
  data() {
    return {
      radioCkd: '课程',
      // radio是否被选中，默认可选，显示下一步按钮，否则显示保存
      undisabled: false,
      editform: {
        courseName: '',
        className: '',
        activityName: '',
        tinymce: '',
        showswitch: true,
        switch1: true,
        switch2: true,
        switch3: true
      },
      rules: {
        activityName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ]
      },
      list: [
        {
          id: '1',
          img: '//scd4a4b1c7e0b-static.qiqiuyun.net/files/item/2019/04-22/1444066ebb50860524.jpeg',
          type: '多人拼团',
          title: '测试789多人拼团',
          editNum: '0',
          orderNum: '0',
          goods: '0.00'
        }
      ]
    }
  },
  methods: {
    showSwitch() {
      this.editform.showswitch = !this.editform.showswitch
    },
    submitBtn() {
      this.$message({
        showClose: true,
        message: '保存成功',
        type: 'success'
      })
    },
    goNextBtn() {
      this.$refs.editform.validate((valid) => {
        if (!valid) {
          return false
        }
        this.$router.push({ name: 'edit-step3' })
      })
    }
  }
}
</script>

<style lang="scss">
.stepsBox {
  padding: 20px 30px;
}
.el-.el-step__title.is-success {
  margin-left: -20px;
}
.el-upload__tip {
  margin-top: 0;
}
.el-form-item__content {
  line-height: 36px;
  position: relative;
  font-size: 14px;
}
.item-cover {
  margin-left: 100px;
  margin-bottom: 22px;
}
.item-cover__img {
  display: inline-block;
  width: 230px;
}
.item-cover__img img {
  width: 100%;
}
// switch文字定位设置
.switchStyle .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
.switchStyle .el-switch__label--left {
  z-index: 9;
  left: 20px;
}
.switchStyle .el-switch__label--right {
  z-index: 9;
  left: -4px;
}
.switchStyle .el-switch__label.is-active {
  display: block;
}
.switchStyle.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 54px !important;
}
</style>
